import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'banner.dart';
import 'tijiao.dart';

void main() {
  //隐藏状态栏
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    HomePage(),
    Center(child: Text('活动页面')),
    Center(child: Text('订单页面')),
    Center(child: Text('我的页面')),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '展示',
      home: Scaffold(
        resizeToAvoidBottomInset: true,
        body: _pages[_selectedIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.orange,
          unselectedItemColor: Colors.grey,
          onTap: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '首页',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.event),
              label: '活动',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.list),
              label: '订单',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: '我的',
            ),
          ],
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final List<String> titles = [
    "夏木尼,小王子的玫瑰.",
    "钱塘往事|致那些远...",
    "胡日尔镇的美术馆",
    "致那些远去的记忆"
  ];

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      // 页面可以上下滑
      child: Column(
        children: [
          // 轮播图
          Container(
            width: 2000,
            child: MBanner(
              imageUrls: [
                'assets/images/banner_01.png',
                'assets/images/banner_02.png',
                'assets/images/banner_03.png',
                'assets/images/banner_04.png',
              ],
            ),
          ),
          const SizedBox(height: 10),

          // 栏目按钮
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: FeatureCardRow(),
          ),

          const SizedBox(height: 12),
          const Row(
            children: [
              SizedBox(
                width: 165,
              ),
              Text(
                "景区门票",
                style: TextStyle(fontSize: 21, fontWeight: FontWeight.w800),
              ),
              SizedBox(
                width: 860,
              ),
              Text(
                "更多",
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
          // GridView 显示 PageTile
          // 放在你的 HomePage 中 GridView 的位置
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 35),
            child: Column(
              children: List.generate(2, (rowIndex) {
                return Padding(
                  padding: const EdgeInsets.only(bottom: 12),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: List.generate(2, (colIndex) {
                      int index = rowIndex * 2 + colIndex;
                      return Expanded(
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 120),
                          child: PageTile(
                            star: 4,
                            imgSrc: "assets/images/列表图 ${index + 1}.png",
                            title: titles[index],
                            text: "内容描述",
                            price: 240.0 + index,
                            qi: true,
                            index: index,
                          ),
                        ),
                      );
                    }),
                  ),
                );
              }),
            ),
          ),
          const Row(
            children: [
              SizedBox(
                width: 165,
              ),
              Text(
                "活动预约",
                style: TextStyle(fontSize: 21, fontWeight: FontWeight.w800),
              ),
              SizedBox(
                width: 860,
              ),
              Text(
                "更多",
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
          const SizedBox(
            height: 13,
          ),
          // 替换原来的四个 book() 调用
          SizedBox(
            height: 150,
            width: 1000, // 设置固定高度
            child: ListView(
              scrollDirection: Axis.horizontal, // 水平滚动
              children: [
                book("assets/images/列表图 1.png", "伊比利亚半岛"),
                book("assets/images/列表图 2.png", "不一样的北海道"),
                book("assets/images/列表图 3.png", "伊比利亚半岛"),
                book("assets/images/列表图 4.png", "不一样的北海道"),
                book("assets/images/列表图 1.png", "不一样的北海道"),
                book("assets/images/列表图 2.png", "不一样的北海道"),
              ],
            ),
          ),
          const Row(
            children: [
              SizedBox(
                width: 165,
              ),
              Text(
                "景区相册",
                style: TextStyle(fontSize: 21, fontWeight: FontWeight.w800),
              ),
              SizedBox(
                width: 860,
              ),
              Text(
                "更多",
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
          const SizedBox(
            height: 12,
          ),
          SizedBox(
            height: 220,
            width: 1000, // 设置固定高度
            child: ListView(
              scrollDirection: Axis.horizontal, // 水平滚动
              children: [
                ticket("assets/images/列表图 1.png", "伊比利亚半岛13天"),
                ticket("assets/images/列表图 2.png", "伊比利亚半岛13天"),
                ticket("assets/images/列表图 3.png", "伊比利亚半岛13天"),
                ticket("assets/images/列表图 4.png", "伊比利亚半岛13天"),
                ticket("assets/images/列表图 2.png", "伊比利亚半岛13天"),
                ticket("assets/images/列表图 1.png", "伊比利亚半岛13天"),
                ticket("assets/images/列表图 4.png", "伊比利亚半岛13天"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Widget ticket(String picture, String title) {
  return Stack(
    children: [
      Image.asset(
        picture,
        width: 200,
        height: 200,
      ),
      Positioned(
          left: 28,
          top: 170,
          child: Image.asset("assets/images/icon_location.png")),
      Positioned(left: 48, top: 170, child: Text(title)),
    ],
  );
}

Widget book(String picture, String title) {
  return Container(
    width: 200, // 设置每个项目的固定宽度
    margin: EdgeInsets.only(left: 25), // 添加水平间距
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Image.asset(
            picture,
            width: 200,
            height: 100,
            fit: BoxFit.cover,
          ),
        ),
        SizedBox(height: 8),
        Text(
          title,
          style: TextStyle(
            fontSize: 16,
          ),
        ),
      ],
    ),
  );
}

//栏目
class FeatureCardRow extends StatelessWidget {
  final List<FeatureItem> features = [
    FeatureItem(
        icon: Icons.local_activity, label: '门票购买', color: Colors.orange),
    FeatureItem(icon: Icons.map, label: '景区导览', color: Colors.blue),
    FeatureItem(icon: Icons.check_circle, label: '活动预约', color: Colors.green),
    FeatureItem(icon: Icons.photo_album, label: '游玩攻略', color: Colors.pink),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 8,
            offset: Offset(0, 4),
          )
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: features.map((item) {
          return Column(
            children: [
              Container(
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: item.color.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Icon(item.icon, size: 30, color: item.color),
              ),
              SizedBox(height: 6),
              Center(
                child: Text(item.label,
                    style: TextStyle(
                      fontSize: 14,
                    )),
              ),
            ],
          );
        }).toList(),
      ),
    );
  }
}

class FeatureItem {
  final IconData icon;
  final String label;
  final Color color;

  FeatureItem({required this.icon, required this.label, required this.color});
}

//四个之一
class PageTile extends StatefulWidget {
  final String imgSrc;
  final String title;
  final String text;
  final double star;
  final double price;
  final bool qi;
  final int index;

  const PageTile({
    super.key,
    required this.imgSrc,
    required this.price,
    required this.star,
    required this.text,
    required this.title,
    required this.index,
    required this.qi,
  });

  @override
  State<PageTile> createState() => _PageTileState();
}

class _PageTileState extends State<PageTile> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => Tijiao(index: widget.index)));
        });
      },
      child: Container(
        height: 200,
        child: Padding(
          padding: EdgeInsets.all(5),
          child: Row(
            children: [
              Container(
                child: Image.asset(widget.imgSrc),
              ),
              SizedBox(
                width: 15,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    widget.title,
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
                    maxLines: 1,
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Text(
                    widget.text,
                    style: TextStyle(fontSize: 15, color: Colors.grey),
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Row(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Icon(
                            Icons.star,
                            size: 15,
                            color:
                                widget.star >= 1 ? Colors.yellow : Colors.grey,
                          ),
                          Icon(
                            Icons.star,
                            size: 15,
                            color:
                                widget.star >= 2 ? Colors.yellow : Colors.grey,
                          ),
                          Icon(
                            Icons.star,
                            size: 15,
                            color:
                                widget.star >= 3 ? Colors.yellow : Colors.grey,
                          ),
                          Icon(
                            Icons.star,
                            size: 15,
                            color:
                                widget.star >= 4 ? Colors.yellow : Colors.grey,
                          ),
                          Icon(
                            Icons.star,
                            size: 15,
                            color:
                                widget.star >= 5 ? Colors.yellow : Colors.grey,
                          ),
                        ],
                      ),
                      SizedBox(
                        width: 20,
                      ),
                      Text(
                        "9999+条评论",
                        style: TextStyle(fontSize: 15, color: Colors.grey),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 7,
                  ),
                  Row(
                    children: [
                      Container(
                        decoration: BoxDecoration(
                            color: Colors.orange,
                            borderRadius: BorderRadius.circular(5)),
                        child: Padding(
                          padding: EdgeInsets.only(
                              left: 10, right: 10, top: 3, bottom: 3),
                          child: Text(
                            "5A景区",
                            style: TextStyle(fontSize: 10),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Container(
                        decoration: BoxDecoration(
                            border: Border.all(color: Colors.black, width: 1),
                            borderRadius: BorderRadius.circular(5)),
                        child: Padding(
                          padding: EdgeInsets.only(
                              left: 10, right: 10, top: 3, bottom: 3),
                          child: Text(
                            "限制1.32m以上 8岁以上",
                            style: TextStyle(fontSize: 10),
                          ),
                        ),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                    "¥${widget.price}元${widget.qi ? '起' : ''}",
                    style: TextStyle(fontSize: 24, color: Colors.orange),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}
